<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="store.state.menu.isCollapse ? '64px' : '160px'">
        <Aside />
      </el-aside>
      <el-container>
        <el-header height="44px">
          <Header />
        </el-header>
        <el-main class="main-content">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import Aside from '../components/aside.vue'
import Header from '../components/navHeader.vue'
import { useStore } from 'vuex'

const store = useStore()
const name = 'Layout'
</script>
<style lang="less" scoped>
.common-layout {
  height: 100vh;
}

.layout-container {
  height: 100vh;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0;  /* 移除默认内边距 */
  height: 44px !important;  /* 调整为统一高度 */
  line-height: normal;
}

.el-aside {
  background-color: #545c64;
  transition: width 0.3s;  /* 添加过渡动画 */
}

.main-content {
  padding: 20px;
  background-color: #f0f2f5;
}
</style>